'use client'

import { useState, useEffect } from 'react'

interface HistoryItem {
  chatId: string
  updateTime: string
  title: string
  customTitle?: string
}

interface HistoryDialogProps {
  isOpen: boolean
  onClose: () => void
  historyList: HistoryItem[]
  loading: boolean
  onSelectChat: (chatId: string) => void
  isDarkMode?: boolean
}

// 国际化文本配置
const i18n = {
  zh: {
    title: '历史对话',
    noHistory: '暂无历史对话',
    untitledChat: '未命名对话',
    close: '关闭'
  },
  en: {
    title: 'Chat History',
    noHistory: 'No chat history',
    untitledChat: 'Untitled chat',
    close: 'Close'
  }
}

export default function HistoryDialog({
  isOpen,
  onClose,
  historyList,
  loading,
  onSelectChat,
  isDarkMode = false
}: HistoryDialogProps) {
  const [language, setLanguage] = useState<'zh' | 'en'>('zh')

  // 检测系统语言
  useEffect(() => {
    const detectLanguage = () => {
      const userLang = navigator.language || (navigator as any).userLanguage
      const isZh = userLang.toLowerCase().startsWith('zh')
      setLanguage(isZh ? 'zh' : 'en')
    }
    detectLanguage()
  }, [])

  const t = i18n[language]

  if (!isOpen) return null

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className={`${isDarkMode ? 'bg-gray-800' : 'bg-white'} rounded-lg max-w-md w-full max-h-[80vh] flex flex-col`}>
        {/* 头部 */}
        <div className={`flex items-center justify-between p-4 border-b ${isDarkMode ? 'border-gray-700' : 'border-gray-200'}`}>
          <h2 className={`text-lg font-semibold ${isDarkMode ? 'text-gray-100' : 'text-gray-900'}`}>{t.title}</h2>
          <button
            onClick={onClose}
            className={`p-2 ${isDarkMode ? 'text-gray-400 hover:text-gray-200 hover:bg-gray-700' : 'text-gray-400 hover:text-gray-600 hover:bg-gray-100'} rounded-lg`}
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        {/* 内容区域 */}
        <div className="flex-1 overflow-y-auto p-4">
          {loading ? (
            <div className="flex items-center justify-center py-8">
              <div className={`animate-spin rounded-full h-8 w-8 border-b-2 ${isDarkMode ? 'border-gray-400' : 'border-gray-900'}`}></div>
            </div>
          ) : historyList.length === 0 ? (
            <div className={`text-center py-8 ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}>
              <svg className={`w-12 h-12 mx-auto mb-4 ${isDarkMode ? 'text-gray-600' : 'text-gray-300'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              <p>{t.noHistory}</p>
            </div>
          ) : (
            <div className="space-y-2">
              {historyList.map((item) => (
                <div
                  key={item.chatId}
                  onClick={() => onSelectChat(item.chatId)}
                  className={`p-3 rounded-lg border ${isDarkMode ? 'border-gray-700 hover:border-gray-600 hover:bg-gray-700' : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50'} cursor-pointer transition-colors`}
                >
                  <div className="flex items-start justify-between">
                    <div className="flex-1 min-w-0">
                      <h3 className={`font-medium ${isDarkMode ? 'text-gray-200' : 'text-gray-900'} truncate`}>
                        {item.customTitle || item.title || t.untitledChat}
                      </h3>
                      <p className={`text-sm ${isDarkMode ? 'text-gray-400' : 'text-gray-500'} mt-1`}>
                        {new Date(item.updateTime).toLocaleString('zh-CN')}
                      </p>
                    </div>
                    <div className="ml-2 p-1">
                      <svg className={`w-4 h-4 ${isDarkMode ? 'text-gray-500' : 'text-gray-400'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                      </svg>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

        {/* 底部操作区 */}
        <div className={`p-4 border-t ${isDarkMode ? 'border-gray-700' : 'border-gray-200'}`}>
          <button
            onClick={onClose}
            className={`w-full py-2 px-4 ${isDarkMode ? 'bg-gray-700 text-gray-200 hover:bg-gray-600' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'} rounded-lg transition-colors`}
          >
            {t.close}
          </button>
        </div>
      </div>
    </div>
  )
}
